APOSTILA DE FLASH 


MACROMEDIA FLASH 


O Macromedia Flash é um software para criação de 
animações sofisticadas, onde podemos criar as animações 
com movimentos, som e interatividade ao mesmo tempo. 
Com o Flash não temos limitações a barreira é nossa 
imaginação. 


Além disso, o Flash suporta outros tipos de arquivos como bitmap (JPG, GIF. 
BMP) e sons (WAV), porém quanto mais conteúdos de outros formatos forem 
inseridos no Flash, maior vai ficar o arquivo, dificultando assim a exibição do 
projeto. 

| - OBJETIVO DO FLASH 


O que podemos criar com o Flash? 


Além de animações sofisticadas para serem inseridas em nosso site, também 
podemos criar: 


* banners com propagandas, promoções, divulgações, etc., 
* botões com interatividade de som e movimento; 


* layout inteiro em flash, ou seja, criar o site em flash, utilizando apenas 
um html para carregar o site; 


* jogos para Internet. 


No Flash podemos utilizar comandos HTML e até mesmo JavaScript para auxiliar 
em projetos mais complexos. 
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Il - FORMATO DE ARQUIVOS 


Quando salvamos um arquivo ou projeto no Flash ele gera um arquivo de extensão 
.FLA, esse formato nos permite editar o projeto no próprio Flash. 

Mas para o Browser não entende esse formato de arquivo, o formato necessário 
para ser exibido na Internet é o SWF. Para conseguir transformar nosso projeto 
FLA em SWF precisamos publicar o projeto. (Esse processo aprenderemos mais 
adiante.) 


Não basta o arquivo estar em SWF, para que funcione, é necessário ter o plugin 
do Flash instalado na máquina. O Browsers novos já vem com esse plugin, mas se 
por acaso não estiver instalado na máquina, podemos fazer um Download do 
plugin através do site da macromedia. 


O Macromedia Flash, não gera somente arquivos FLA e SWF, ele também gera 
arquivos executáveis (EXE), Imagens (GIF, JPG, PNG), entre outros. 
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lii - AMBIENTE DO FLASH 


Ao contrário do Fireworks, o Flash já inicia o projeto com um documento. Mas 
antes de dar início ao trabalho é preciso configurar o tamanho do projeto. 


Macromedia Flash MX - [Sem Titulo-1] BE) 
e Arquivo Editar Exibir Inserir Modificar Texto Controlar Janela 
po reran] Luma UE rempu > Misturador de cores 

A RA SD a O > Amostra de Cores 
>» Componentes 
> Respostas 


é, 4 [e 


Painéis ou 
Paletas 


Janela do Documento 


> Ações - Quadro 
> Propriedades 


Barra de Ferramentas 


Painel de Propriedades 


As opções desse painel 
mudam conforme a 
ferramenta escolhida. 
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EXERCÍCIO TEÓRICO 


1 — O que é Macromedia Flash? 


2 — Quais os objetivos do Flash? 


3 — Podemos fazer desenhos com o Flash? Quais tipos de desenho? 


4 — Cite algumas utilizações do Flash? 


5 — Quais os formatos de arquivos que podem ser gerados pelo Flash e qual é o 
formato do projeto Flash? 


Colégio Serrano Guardia — Ensino Médio Técnico 
Profº Líslei 


Página: 4 


APOSTILA DE FLASH 


EXERCÍCIO PRÁTICO 
Desenvolva os exercícios a seguir, não deixe de salvar o exercício com o nome 


do título. 
Competência: Saber utilizar as ferramentas de desenho do Flash 


EXERCICIO FLASHO1 EXERCICIO FLASHO2 


EXERCICIO FLASHO3 EXERCICIO FLASHO4 


DM 
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IV — ANIMAÇÃO QUADRO-A-QUADRO 


Andes de criarmos uma animação quadro-a-quadro precisamos entender como 
funciona a Time Line e saber o que é Quadro-Chave. 


A Time Line ou Linha de Tempo são os quadros que compõem uma animação e o 
Quadro-Chave é uma sequência de quadros. 


Para organizar nosso trabalho temos as camadas. 


Linha de Tempo 


EP camada 2 
LA camada 1 . 


0.6s 


tp é] mj 


Quadros Chave 


Camadas 


As camadas são como folhas transparentes uma sobreposta a outra. Para criar 
novas camadas devemos clicar no botão ‘Adicionar Camada’ que 7 

se localiza na parte inferior das camadas. No mesmo local também temos o ícone 
para excluir camadas, devrg Ds sempre prestar atenção na camada que está 
selecionada. 


Para mantermos um projeto organizado, é aconselhável renomear as camadas 
conforme seu conteúdo. 
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IV - ANIMAÇÃO QUADRO-A-QUADRO 
Antes de iniciarmos vamos entender melhor o que é uma animação quadro-a- 
quadro. Essa animação é a animação onde vamos mostrar para o Flash, quadro- 
a-quadro o que ele deve fazer utilizando o quadro chave. 


1) Inicie um novo projeto e salve como Exemplo 01 


2) No primeiro frame crie uma quadrado. 


Primeiro Frame 
» Misturador de cores 


Da O O a Dag Ds EO a OL BL GU e » Amostra de Cores 
+ Componentes 
+ Respostas 


Macromedia Flash MX - [Sem Titulo-3] 


w 
Ed 


| NBEINO we N 
R23800>9 


> Ações - Quadro 

» Propriedades 

F Documento Tamanho: Fundo: | „| Tatade |12 | qps 
Sem Título.. Publicar: 


3) No segundo frame vamos copiar o frame 1 — utilizando a tecla F6: 
Selecione o frame 2 e tecle F6. 
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IV - ANIMAÇÃO QUADRO-A-QUADRO 
4) Selecione o frame 2 e rotacione e mova o quadrado. 


Você vai perceber que no frame 1 temos um posição do quadrado e no frame 2 
temos outra situação. 


Faça isso até o frame 10, trocando a posição, cor e rotacionando o objeto 
quadrado. 


5) Posicione o marcador do tempo no frame 1 e tecle Enter. 


A animação quadro-a-quadro é muito parecido com gif animado, pois precisamos 
ter todas as posições em detalhes, onde podemos manipular e controlar o 
movimento que desejamos. 


EXERCÍCIO PRÁTICO 


Reproduza o palhaço e faça uma animação com os olhos e a boca utilizando 
quadro-a-quadro. 

Competência: Saber utilizar as ferramentas de desenho do Flash e fazer 
animações quadro-a-quadro. 


EXERCICIO FLASHOS 
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V — INTERPOLAÇÃO 

Para termos uma animação com efeito Tweening (transformação gradual) basta 
definir o primeiro e o último frame e o flash se encarrega de fazer a 
transformação. Ele faz cálculos para posicionar cada frame. 


Temos 2 tipos de interpolação — Movimento e Forma. 


A Interpolação Forma é para objetos não agrupados e o Movimento para objetos 
agrupados ou símbolos. 


Vamos ver um exemplo de interpolação FORMA. 

1) Abra um novo documento do Flash e salve como Exemplo 02 

2) No frame 1 crie um circulo no canto esquerdo da área do documento. 

3) Selecione o frame 20 e copie do frame 1utilizando F6. 

4) Selecione o objeto (circulo) do frame 20 com o ponteiro e arraste para o canto 


direito da área de trabalho. 
A time line ficará assim: 


EP camada 1 


É Cenai 6,4l 
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V — INTERPOLAÇÃO 


5) Clique em qualquer lugar na área cinza da linha de tempo. 


» Linha de Tempo 


EP Camada 1 


to 4, É & || 4] alol ml (0/20 fios | 16s < 
e | É nai E) 4l 


6) Na barra de propriedades selecione Forma no campo Interpol, 


v Propriedades 


Quadro Interpol.: | Nenhum Som: | Nenhum v| 
Rótulo do Quadro au 3 Efeito: | Nenhum Editar 
oleosos e TERTE Sinc.: | Evento wW Repetir: O | vezes 


Nenhum som selecionado. 


7) Posicione o cursor no frame 1 e tecle Enter. 


Experimente trocar a cor do circulo, modificar sua forma e até adicionar outro 
objeto no frame 20. 


8) Crie uma nova camada e nessa nova camada faça uma animação com letras, 
lembrando que devemos desmembrar a palavra utilizando Ctrl + B. 
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V— INTERPOLAÇÃO 


Agora que já vimos como se trabalha quadro-a-quadro e interpolação Forma, 
vamos aprender como trabalhar com a interpolação MOVIMENTO. 


O procedimento é igual ao anterior, a grande diferença é que os objetos 
precisam estar agrupados, ou seja a linha com o preenchimento. 


Nesse caso não é possível fazer a metamorfose entre os objetos. 
Exemplo: 

1) Abra um novo documento do Flash e salve como Exemplo 03. 

2) No frame 1 crie um circulo no canto esquerdo da área do documento. 


3) Agrupe o objeto. Selecione a ferramenta ponteiro, dê duplo clique no objeto e 
tecle Ctrl + G. 


4) Selecione o frame 20 e copie do frame 1utilizando F6. 


5) Selecione o objeto (circulo) do frame 20 com o ponteiro e arraste para o canto 
direito da área de trabalho. 


6) Clique em qualquer lugar na área cinza da linha de tempo. 


7) Na barra de propriedades selecione Movimento no campo Interpol. 


Interpol.: | Nenhum v| Som: | Nenhum v 
Məanbhiuim 5 
[Movimento || iaci 
Sinc.: | Evento Wv | Repetir: o [vezes 


Nenhum som selecionado. 
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EXERCÍCIO PRÁTICO 


Desenvolva os exercícios a seguir, não deixe de salvar o exercício com o nome 
do título. 

Competência: Saber construir animações com interpolação de Forma e 
Movimento. 


EXERCICIO FLASHO6 


Utilizando a Interpolação Forma, faça uma animação de um circulo se 
transformando em seu nome com alterações de cores e tamanhos. 
Utilize sua imaginação. 


EXERCICIO FLASHO7 


Utilizando a Interpolação Movimento, faça uma animação de um quadrado no 
cento da tela de tamanho pequeno se transformado em um quadrado grande 
ocupando quase toda a área. 

Em uma nova camada faça seu nome entrando na tela e parando sobre o 
quadrado. 


ANOTAÇÃO 
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VI — INTERPOLAÇÃO SOBRE UM CAMINHO 

Já aprendemos como fazer animações simples, essa animação simples segue 
uma trajetória já definida, porém podemos alterar essa trajetória, fazendo com que 
o objeto faça o movimento no caminho que desejamos. 


Exemplo: 


1) Abra um novo documento do Flash e salve como Exemplo 04. 


2) Crie um círculo no canto superior esquerdo com um preenchimento gradiente 
e agrupe esse objeto. 


E | Bill alo) Bit 1 l20qps| 00s < 
É; Cenai 
O 
h d 


3) Clique no frame 40 e crie um quadro-chave. (F6) 

4) Arraste o objeto para o lado superior direito. 

5) Selecione o painel de propriedades Movimento no campo Interpol. 

6) Com o quadro 40 selecionado, clique no menu Inserir / Guia de Movimento. 
Este comando cria mais uma camada automaticamente que tem a função de 


guardar o caminho. 


7) Utilizando o lápis, desenhe um caminho nessa nova camada. 
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V — INTERPOLAÇÃO SOBRE UM CAMINHO 


8) Selecione o Frame 1 da Camada 1 e na barra de ferramentas clique no item 
Encaixar. 


Interpol.: | Movimento v | [V] Redim. 
Atenuação: ooo -| 
Rotação: Auto pm Sinc.: | Evento V Repetir: |0 (vezes 


osi 


Som: | Nenhum v 


] Quadro 


| Rótulo do Quadro 


Efeito: | Nenhum Editar 


âncora com nome 


o ook 


Orientar à trajetória Nenhum som selecionado. 


9) Selecione o frame 40 e arraste o objeto até a linha guia. 
10) Selecione o frame 1 e tecle Enter. 


Obs. A linha guia não aparecerá no filme. Para visualizar telce Ctrl + Enter. 


108584 A 


Colégio Serrano Guardia — Ensino Médio Técnico 
Profº Líslei 


Página: 14 


APOSTILA DE FLASH 


EXERCÍCIO PRÁTICO 
Desenvolva os exercícios a seguir, não deixe de salvar o exercício com o nome 


do título. 
Competência: Saber construir animações sobre um caminho. 


EXERCICIO FLASHO8S 


Faça uma animação de um círculo dando a volta em outro círculo, conforme 
ilustrações abaixo. 


00000 


ANOTAÇÃO 
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VI - MÁSCARAS 


O Efeito de Máscara cria camadas que escondem parte de outros layers que 
estejam abaixo do layer em que foi criada a máscara. É possível usar qualquer 
modalidade de animação, exceto trajetórias de movimento, para instruir a 
movimentação da máscara. 


Exemplo: 
1) Abra um novo arquivo e salve como Exemplo 05. 


2) Utilizando a ferramenta de texto, escreva a palavra “Flash” no centro da tela de 
documento. Renomeie a camada para “Texto”. 


3)Crie outra camada e escreva e desenhe um círculo e agrupe-o. Renomeie a 
camada para “Animação”. 


F Animação 


LUZ Texto RE | 
27 + da mj tl © a| [| 1 |12.0qps | 0.0s < 
É, Cenal 


QFlash 


5) Faça uma animação com interpolação movimento do círculo passando sobre o 
texto. 


Não esqueça, com a tecla F5 você repete o conteúdo da camada Texto enquanto 
dure a animação. 
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VI - MÁSCARAS 


6) Clique com o botão direto sobre a camada “Animação” e escolha a opção 
Máscara. 


Animação 


p Texto 


ima 
Interpolação de movimento 


[| 7 |120qps| 05s < 


to 2: É] 


É, Cenal 


Note que a camada texto é um sub-nível da camada máscara (Animação) e as 
camadas ficam bloqueadas após o comando. 


EXERCÍCIO PRÁTICO 


Desenvolva os exercícios a seguir, não deixe de salvar o exercício com o nome 
do título. 


Competência: Saber construir animações com o efeito máscara. 


EXERCICIO FLASHO9 


Faça uma animação com o seu nome, utilizando o efeito máscara. 
Use a sua criatividade! 
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VII - SÍMBOLOS 


Os símbolos são objetos que ficam armazenados em uma biblioteca. Esses 
objetos podem ser utilizados várias vezes dentro do projeto, isso otimiza o trabalho 
e reduz o tamanho do arquivo, pois independente da quantidade de reprodução o 
Flash armazena apenas 1 cópia dele. 


As repetições ou instâncias de um símbolo aparecem como objetos 
independentes no projeto, porém ficam interligados a um símbolo principal, por 
isso, qualquer alteração feita no símbolo mestre, refletirá nos símbolos 
reproduzidos, mas podemos alterar símbolo reproduzido sem afetar o mestre. 


Utilize símbolos sempre que um objeto for utilizado várias vezes dentro do projeto, 
seja animado ou não. 


Existem 3 tipos de símbolos. 


Gráfico (imagens) 
Este tipo é usado somente para imagens estáticas ou sequência de imagens. 


Clipe de Filme 
São utilizados para pequenos trechos de animação que funcionam independente 
da linha de tempo do projeto, funciona como um ninifilme. 


Botões 
Os botões são objetos que responde a eventos do mouse realizando alguma ação 
dentro do projeto. 
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VII - SÍMBOLOS 


Símbolo Gráfico 


Vamos aprender como criar e manipular símbolo gráfico. 
Exemplo 
1) Abra um arquivo novo e salve como Exemplo 06. 


2) Desenhe um objeto gráfico, por exemplo, um círculo. 


3) Dê duplo clique sobre o objeto para selecionar o preenchimento e o contorno. 


4) Com o objeto selecionado, selecione Inserir — Converter em Símbolo... Ou 
tecle F8. 


5) Na janela de símbolos selecione a opção Gráfico e dê um nome para o 
símbolo, por exemplo, círculo. Clique em OK. 


Converter em Simbolo 


Nome: | Símbolo 1 


Comportamento: O Clipe deFime Registo: ggg 


O Botão 


Gráfi 
Sia 
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VII - SÍMBOLOS 


A partir de agora o seu círculo é 
um símbolo gráfico e está na 
biblioteca do projeto. 


Um item na biblioteca 


Para ver a biblioteca, selecione 
Janela — Biblioteca ou F11 
ou ainda Ctrl + L. 


E3 circulo Gráfico 


Vamos incrementar nosso exemplo. 


6) Duplique o objeto no frame 5 e no 
frame 10. 

O objeto deve permanecer no mesmo 
local. 
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VII - SÍMBOLOS 


7) No frame 5 aumente o objeto utilizando a ferramenta dimensionar. 


8) Aplique uma transparência no objeto através do painel de propriedades: 
Cor — Alfa, diminuindo a porcentagem de transparência. 


+ Propriedades 


Instância de: Circulo 


(rear) epi 


v | Primeiro: [5 | Brilho 


— Í Tonalidade 
L: 2093 | X: 167.9 V Alfa 
pm am 
H: 209.9 | Y: 86.9 


Gráfico 


Nenhuma 


EEEF ERES SEE SUS SELECAO 


EP camada 1 


Mm) a| 7 [20qps| 055 < 


e | É cena 
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VII - SÍMBOLOS 


Editando o símbolo 
Como já foi visto, os símbolos ficam armazenados na biblioteca do Flash. Quando há 


a necessidade de alterar qualquer símbolo, é preciso editá-lo através da biblioteca 
ou de sua instância. Para isso, dê duplo clique na instância ou no objeto da 


biblioteca. 


oO Bl [| 1 |i20qps| 00s < 


Nome do 
símbolo 


Repare que automaticamente a linha de tempo mudou, isso porque estamos 
trabalhando com a edição do símbolo. O Flash abre uma nova cena com o objeto e o 


nome do símbolo. 


Devemos prestar muita atenção em que cena estamos 


trabalhando. 
Troque a cor do círculo e volte para a cena principal clicando sobre Cena 1 na 
barra onde está indicado o símbolo. 


Veja o que aconteceu com seu exemplo. 
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VII - SÍMBOLOS 


Símbolo Clipe de Filme 


Como já vimos, o Clipe de Filme é um ninifilme. 

Vamos começar com um exemplo para entendermos melhor. 
Nesse exemplo faremos um coração pulsando. 

1) Abra um novo documento do Flash e salve como Exemplo 07. 


2) Desenhe um coração. 


3) Selecione o preenchimento e o contorno. (Duplo clique no objeto) 


4) Transforme em um símbolo do tipo Gráfico e de o nome do coração. 


Converter em Simbolo 


Nome: [Corsçõd IC D 


Comportamento: 2 ce de Filme Registro: gma 
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VII - SÍMBOLOS 


Símbolo Clipe de Filme 


5) Selecione Inserir — Novo símbolo... no menu. Escolha a opção Clipe de Filme 
e de o nome de “Animação”. 


Cria um novo simbolo 


6: Gráfico 3 


Abrirá uma nova cena com o ponto de referência do símbolo. 


Ponto de 
+ —— > referência do 
símbolo. 
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VII - SÍMBOLOS 


Símbolo Clipe de Filme 


6) Abra a biblioteca. F11 


7) Selecione o símbolo coração e arraste para a área do documento. 


v Linha de Tempo 


EP camada 1 
to 4: É] © |4 alo | 1 [2oqs[005 < | 
RED] - cenai I Animação 8, 8 


E Animação Clipe de Filrr 
D 


E coração Gráfico 
=— 


8) Duplique o quadro-chave no frame 10 e no frame 20, utilizando F6. 

9) No frame 10 aumente o objeto (coração). 

10) Aplique a interpolação na linha de tempo. 

11) Volte para a Cena 1. 

12) Arraste da biblioteca o símbolo Animação e dê Crtl + Enter para verificar 


como ficou! 
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VII - SÍMBOLOS 


Símbolo Botão 


Botão é um objeto que respondem a eventos do mouse e a ações implementadas 
nele. Os botões podem ser animados, com som ou estático. 
Vamos construir um botão. 


1) Utilizando o mesmo exemplo do coração (Exemplo 07), selecione a opção 
Inserir — Novo Símbolo... do menu. 


2) Selecione a opção Botões e de o nome de “Botão Exemplo”. 


Cria um novo simbolo 


(Botao exemplo 


Comportamento: (O Clipe de Filme 
ráfico 3 
AR 


Novamente abrirá uma nova cena, onde vamos construir nosso botão exemplo, 
porém a linha de tempo vai mudar. 


v Linha de Tempo 


Sobre |Para baixo Área 


EP camada 1 


va © |H alo) m| ol 1 [2ows[005 < || > 


a | = Cenal “N Botao exemplo B A, |100: v] 


Aparecerá na linha de tempo as opções dos estados dos botões. 


Para Cima = O botão em seu estado natural. 

Sobre = Define a imagem, som ou animação do botão quando o mouse passa 
sobre ele. 

Para Baixo = Define a imagem, som ou animação quando clicamos no botão. 
Área = Define a área que responderá aos eventos do mouse. 
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VII - SÍMBOLOS 


Símbolo Botão 


3) Vamos desenhar o botão em seu estado natural. Desenhe um círculo com 
gradiente linear e paralelamente desenhe outro círculo, também com gradiente linear 
mas em outra posição, sem contorno e menor do que primeiro. 


Mova o círculo menor para cima do maior. 


4) Já definimos o estado ‘Para Cima’. Agora vamos definir o estado ‘Sobre’. 
Na Linha de tempo selecione a posição Sobre e tecle F6. 
Ele copiou exatamente o objeto anterior. 


5) Troque as cores dos círculos e escreva ‘exemplo’. 
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VII - SÍMBOLOS 


Símbolo Botão 


6) Agora vamos definir o estado ‘Para baixo’. Na Linha de tempo selecione a 
posição ‘Para baixo’ e tecle F6. 
Ele copiou exatamente o objeto anterior. 


7) Apague o texto ‘exemplo’ e deixe os dois círculos da mesma cor. 


8) Do mesmo modo, para definir a área, selecione o estado ‘Área’ e tecle F6. 


Como nosso objeto é um objeto preenchido, ou seja, não existe elementos em 
branco ou transparente, não precisamos alterar nada nesse estado. 


9) Volte para a Cena 1. 


12) Arraste da biblioteca o símbolo Botão exemplo e dê Crtl + Enter para verificar 
como ficou! 
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APOSTILA DE FLASH 


EXERCÍCIO PRÁTICO 


Desenvolva os exercícios a seguir, não deixe de salvar o exercício com o nome 


do título. 
Competência: Saber construir animações com símbolos gráfico, clipe de 


filme e botão. 


EXERCICIO FLASH1O 


Faça um cenário onde apresente estrelas ou pontos brilhando (utilize 
símbolo clipe de filme), que tenha um botão e uma animação com interpolação. 


Sugestões: 


* Cenário de céu com estrelas brilhando e um pássaro passando pela tela. 

* Um semáforo com o sinal amarelo piscando, enquanto aparece o texto 
‘Atenção’. 

* Um coração pulsando enquanto aparece uma flexa atravessando o coração. 


ANOTAÇÃO 
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